<!--
 * @Author: zxh
 * @Email: 1271027008@qq.com
 * @Date: 2020-06-09 16:22:27
 * @Descripttion: 
--> 
<div class="center-manage" style="padding-top: 20px;">
    <div nz-row :gutter="16">
        <div nz-col nzSpan="10" style="text-align: center;">
            <form nz-form [formGroup]="passwordForm" (ngSubmit)="submitEditPassword()">
                <nz-form-item>
                    <nz-form-label [nzSpan]="7" nzRequired>旧密码</nz-form-label>
                    <nz-form-control [nzSpan]="12" nzErrorTip="请输入旧密码">
                        <input type="password" nz-input formControlName="oldPass" placeholder="请输入旧密码" />
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSpan]="7" nzRequired>新密码</nz-form-label>
                    <nz-form-control [nzSpan]="12" nzErrorTip="请输入新密码">
                        <input type="password" nz-input formControlName="newPass" placeholder="请输入新密码" (ngModelChange)="validateConfirmPassword()"/>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSpan]="7" nzRequired>确认新密码</nz-form-label>
                    <nz-form-control [nzSpan]="12" [nzErrorTip]="passwordErrorTpl">
                        <input type="password" nz-input formControlName="confirmNewPass" placeholder="请再次输入新密码" />
                        <ng-template #passwordErrorTpl let-control>
                            <ng-container *ngIf="control.hasError('required')">
                                请再次输入新密码
                            </ng-container>
                            <ng-container *ngIf="control.hasError('confirmNewPass')">
                               两次输入的新密码不一致
                            </ng-container>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-control [nzOffset]="7" [nzSpan]="12">
                      <button nz-button nzType="primary">提交</button>
                      <button nz-button (click)="resetForm()" style="margin-left: 5px;">重置</button>
                    </nz-form-control>
                </nz-form-item>
            </form>
        </div>
    </div>
</div>